<template>
	<view style="flex-direction: column;background-color: #F2F3F5;min-height: 100vh;">
		<view class="item">
			<view class="label">收货人</view>
			<view>
				<input placeholder="请填写姓名" v-model="receiveName" />
			</view>
		</view>
		<view class="item">
			<view class="label">联系电话</view>
			<view>
				<input placeholder="请填写联系电话" type="number" v-model="receivePhone" />
			</view>
		</view>
		<view :class="[cityPicker!=''?'item':'item_']" @tap="showPicker()">
			<view class="label">配送地址</view>
			<view v-if="cityPicker==''" class="text">
				请选择省、市、区
				<uni-icon type="arrowright"></uni-icon>
			</view>
			<view v-if="cityPicker!=''" class="text" style="flex: 1;justify-content: space-between;">
				{{cityPicker}}
				<uni-icon type="arrowright"></uni-icon>
			</view>
		</view>
		<textarea v-model="receiveAddress" placeholder="请填写详细地址(街道/楼牌号等)"></textarea>
		<view class="item" style="justify-content: space-between;margin-top: 20upx;">
			<view class="label" style="width: 200upx;">设为默认地址</view>
			<switch :checked="defaultFlag" style="transform:scale(0.7)" color="#FE0036" @change="checked($event)"></switch>
		</view>
		<view class="buttom" @tap="save()">
			<view class="bt_add">
				保存地址
			</view>
		</view>
		<city-picker ref="picker" @onConfirm="onAddress()" themeColor="#FE0036" :pickerValueDefault="pickerValueDefault"></city-picker>
	</view>
</template>

<script>
	import uniIcon from '../../components/uni-icon.vue';
	import cityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue';
	import {
		getWithParam_,
		postWithParam_
	} from '../../common/request.js';
	import api from '../../common/api.js';
	var graceChecker = require("../../common/graceChecker.js");
	export default {
		components: {
			uniIcon,
			cityPicker
		},
		data() {
			return {
				cityPicker: '',
				city: [],
				defaultFlag: false,
				receiveName: '',
				receivePhone: '',
				receiveAddress: '',
				pickerValueDefault: [0, 0, 0],
				id: null

			}
		},
		onLoad(option) {
			this.id = option.id
			if (option.id != null) {
				getWithParam_(api.ADDRESS_DETAIL, {
					id: option.id
				}).then(res => {
					if (res.data != null) {
						this.receiveName = res.data.receiveName
						this.receivePhone = res.data.receivePhone
						this.receiveAddress = res.data.receiveAddress
						this.defaultFlag = res.data.defaultFlag == 1 ? true : false
						this.pickerValueDefault = []
						this.pickerValueDefault.push(res.data.provinceId)
						this.pickerValueDefault.push(res.data.cityId)
						this.pickerValueDefault.push(res.data.areaId)
						this.city = this.pickerValueDefault
						this.cityPicker = res.data.province + "-" + res.data.city + "-" + res.data.area
					}
				})
			}

		},
		methods: {
			initData() {

			},
			checked(e) {
				this.defaultFlag = e.detail.value
			},
			showPicker() {
				this.$refs['picker'].showPickerView()
			},
			onAddress(e) {
				console.log(e.value)
				this.cityPicker = e.label
				this.city = e.value
			},
			save() {
				var rule = [{
						name: "receiveName",
						checkType: "string",
						checkRule: "2,",
						errorMsg: "姓名至少2个字符"
					},
					{
						name: "receivePhone",
						checkType: "phoneno",
						checkRule: "",
						errorMsg: "请输入正确的电话号码"
					},
					{
						name: "city",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请选择地址"
					},
					{
						name: "receiveAddress",
						checkType: "string",
						checkRule: "5,",
						errorMsg: "详细地址至少5个字符"
					}
				];

				var formData = {
					receiveName: this.receiveName,
					receiveAddress: this.receiveAddress,
					city: this.city,
					receivePhone: this.receivePhone
				}
				var checkRes = graceChecker.check(formData, rule);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return
				}

				var param = {}
				param.province = this.cityPicker.split("-")[0]
				param.city = this.cityPicker.split("-")[1]
				param.area = this.cityPicker.split("-")[2]
				param.provinceId = this.city[0]
				param.cityId = this.city[1]
				param.areaId = this.city[2]
				param.receiveName = this.receiveName
				param.receiveAddress = this.receiveAddress
				param.receivePhone = this.receivePhone
				param.defaultFlag = this.defaultFlag ? 1 : 0
				if (this.id != null) {
					param.id = this.id
					postWithParam_(api.ADDRESS_UPDATE, param).then(res => {
						uni.showToast({
							icon: "none",
							title: "修改成功",
							success() {
								uni.navigateBack({
									delta:1
								})
							}
						})
					})
				} else {
					postWithParam_(api.ADDRESS_ADD, param).then(res => {
						uni.showToast({
							icon: "none",
							title: "添加成功",
							success() {
								uni.navigateBack({
									delta:1
								})
							}
						})
					})
				}

			}

		}
	}
</script>

<style>
	.bt_add {
		width: 650upx;
		height: 80upx;
		color: #FFFFFF;
		background-color: #FE0036;
		border-radius: 10upx;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
		font-weight: 600;
	}

	.bt_add:active {
		color: #FE0036;
		background-color: #FFFFFF;
		border: 1px solid #FE0036;
	}

	.buttom {
		width: 750upx;
		height: 160upx;
		justify-content: center;
		align-items: center;
	}

	textarea {
		background-color: #FFFFFF;
		height: 150upx;
		padding: 30upx 30upx;
		box-sizing: border-box;
		width: 750upx;
	}

	.text {
		color: #888888;
	}

	.label {
		color: #555555;
		width: 150upx;
		align-items: center;
	}

	.item {
		height: 100upx;
		padding: 0 30upx;
		align-items: center;
		background-color: #FFFFFF;
		border-bottom: 1px solid #F2F3F5;
	}

	.item_ {
		height: 100upx;
		padding: 0 30upx;
		align-items: center;
		background-color: #FFFFFF;
		border-bottom: 1px solid #F2F3F5;
		justify-content: space-between;
	}
</style>
